<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .banner {
            width: 400px;
            height: 300px;
            margin: auto;
            position: relative;
        }

        .banner ul li {
            width: 400px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            position: absolute;
            top: 0;
            background-color: #f00;

            opacity: 0;
            transition: .5s;
        }

        img {
            width: 400px;
            height: 300px;
        }

        span {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #000;
            color: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .next {
            right: 0;
        }

        ol {
            position: absolute;
            width: 100%;
            bottom: 10px;
            display: flex;
            justify-content: center;
        }

        ol li {
            width: 20px;
            height: 20px;
            background-color: #ff0;
            margin: 10px;
        }

        .show {
            opacity: 1 !important;
        }

        .active {
            background-color: #0f0;
        }
    </style>
</head>

<body>
    <div class="banner">
        <ul>
            <!-- <li>
                <img src="" alt="">
            </li> -->
        </ul>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
        <ol>
            <!-- <li></li> -->
        </ol>
    </div>

    <script>

        var imgArr = [
            'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/172678/37/31360/94245/6368a7b7E0b784e26/316d509e6f06ec4f.jpg.avif',
            'https://imgcps.jd.com/ling4/100010269255/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa17/42337089/cr/s/q.jpg',
            'https://imgcps.jd.com/ling4/100038004359/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02f9e3/d4dc5356/cr/s/q.jpg',
            'https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa40/1d614cb1/cr/s/q.jpg'
        ];

        var oBanner = document.querySelector('.banner');
        var oUl = oBanner.querySelector('ul');
        var oOl = oBanner.querySelector('ol');

        var oPrev = oBanner.querySelector('.prev');
        var oNext = oBanner.querySelector('.next');

        // 图片和小点都是函数调用以后才会生成，但是在函数外面也需要用到这些变量 --- 提取为全局变量
        var oLis = null;
        var oDots = null;

        var index = 0;   // 控制播放第几张图片

        var t = null;  // 定时器

        // 节流  --- bug    防止点击过快   500ms以内不能触发第二次点击事件
        var flag = true;

        // 0 动态生成图,动态生成小点
        render();


        // 1 自动播放
        //   每次播放下一张   1 2 3 4    setInterval index++   显示那一张图片
        autoPlay();

        // 2 上下翻页
        // 上翻页
        oPrev.onclick = prev;

        // 下翻页
        oNext.onclick = next;

        // 3 小点切换
        // 循环绑定事件
        dotClick();

        // 小点切换
        function dotClick() {
            for (var i = 0; i < oDots.length; i++) {
                // 给对象绑定  

                // 给标签绑定  -- 渲染小点的时候就把自定义属性加上去
                // oDots[i].setAttribute('qq' , i) ;
                oDots[i].onclick = function () {
                    // console.log(666)
                    clearInterval(t);
                    // i 由于异步 4
                    // 只知道点击的这个  this
                    index = this.getAttribute('qq');
                    show();
                    autoPlay();
                }
            }
        }




        // 下翻页执行的函数
        function next() {
            if (flag) {
                flag = false;
                setTimeout(function () {
                    flag = true;
                }, 500)
                clearInterval(t);
                // 控制index
                index++;
                if (index === oLis.length) {
                    index = 0;
                }
                show();
                // 不点击了就继续自动播放
                autoPlay();
            }
        }


        // 下翻页执行的函数
        function prev() {

            if (flag) {
                flag = false;
                setTimeout(function () {
                    flag = true;
                }, 500)
                clearInterval(t);
                // 控制index
                index--;
                if (index === -1) {
                    index = oLis.length - 1;
                }
                show();
                // 不点击了就继续自动播放
                autoPlay();
            }

        }

        // 自动播放
        function autoPlay() {

            t = setInterval(function () {
                index++;
                // 播放到最后一张切到第一张
                if (index === oLis.length) {
                    index = 0;
                }
                // 显示index对应的这张图片
                show();
            }, 1500)
        }



        // 显示index对应的这张图片
        function show() {
            // 清除所有的show
            for (var i = 0; i < oLis.length; i++) {
                oLis[i].classList.remove('show');
                oDots[i].classList.remove('active');
            }
            oLis[index].classList.add('show');
            oDots[index].classList.add('active');
        }




        // 生成图片和小点
        function render() {
            var imgHTML = '';
            var dotHTML = '';
            imgArr.forEach(function (item, i) {
                imgHTML += `
                <li>
                    <img src="${item}" alt="">
                </li>
            `
                dotHTML += `
                <li qq=${i}></li>
            `
            })
            // 添加图片
            oUl.innerHTML = imgHTML;
            // 默认显示第一张  show 
            oLis = oUl.children;
            console.log(oLis);
            oLis[0].classList.add('show');

            // 添加小点
            oOl.innerHTML = dotHTML;
            // 默认第一个小点 active
            oDots = oOl.children;
            oDots[0].classList.add('active');
        }

    </script>

</body>

</html>